<template>
  <view class="page-content">
    <f-navbar
       title="详情"
       bgColor="linear-gradient(101deg, #47B352 1%, #47B352 29%, #1F9970 100%)"
       fontColor="#ffffff"
       leftIconColor="#ffffff"
    navbarType="1"
     ></f-navbar>
    <view class="order">
      <view class="order-card">
        <view class="item-title flex-ac flex-jb l-border-bottom">
          <view  style="font-weight: bold;">订单信息</view>
          <view>{{orderStatus}}</view>
        </view>
        <view class="form">
          <view class="form-item">
            <view>订单编号：</view>
            <view>{{form.orderCode}}</view>
          </view>
          <view class="form-item">
            <view>车辆类型：</view>
            <view>{{getDictionaryName(transportCarClass,form.serviceType)}}</view>
          </view>
		  <view class="form-item">
		    <view>收运油品：</view>
		    <view>{{oilNameList}}</view>
		  </view>
		  <view class="form-item">
		    <view>油脂种类：</view>
		    <view>{{categoryNameList}}</view>
		  </view>
		  <view class="form-item">
		    <view>出厂总重量：</view>
		    <view>{{form.appearanceWeight || '0'}}kg</view>
		  </view>
		  <view class="form-item">
		    <view>车皮重量：</view>
		    <view>{{form.carSkinWeight || '0'}}kg</view>
		  </view>
		  <view class="form-item">
		    <view>净重量：</view>
		    <view>{{form.netWeight || '0'}}kg</view>
		  </view>
          <view class="form-item">
            <view>创建人：</view>
            <view>{{form.createName || userInfo.nickName}} </view>
          </view>
          <view class="form-item">
            <view>运输时间：</view>
            <view>{{form.transportationTime}} </view>
          </view>
        </view>
      </view>
      <view class="title" style="padding: 30rpx 0 20rpx 0;font-weight: bold;"> 油品信息 </view>
      <view class="card">
        <view v-for="item of form.oilList" :key="item" class="l-border-bottom">
          <view class="title">{{item.oilName}}</view>
          <view class="value flex-ac">
			<view>{{item.categoryName}}</view>
			<view>{{item.barrelsNumber || '0'}}桶</view>
			<view>{{item.weight || '0'}}kg</view>
          </view>
        </view>
      </view>
      <u-tabs
        :list="list1"
        lineWidth="65"
        @change="(val) => (infoIndex = val.index)"
        lineColor="#138E57"
      ></u-tabs>
      <view class="tabs-container">
		  <view class="collection-info">
		    <template v-if="infoIndex == '0'">
		      <view class="card">
		        <view class="form-item">
		          <view>接收单位：</view>
		          <view>{{form.startingStationName}}</view>
		        </view>
		        <view class="form-item">
		          <view>联系人：</view>
		          <view>{{form.startingStationContact}}</view>
		        </view>
		        <view class="form-item">
		          <view>联系电话：</view>
		          <view>{{form.startingStationContactPhone}} </view>
		        </view>
		      </view>
		    </template>
			<template v-if="infoIndex == '1'">
			  <view class="card">
			   
			    <view class="form-item">
			      <view>收运司机：</view>
			      <view>{{form.driverName || ''}} </view>
			    </view>
			    <view class="form-item">
			      <view>车牌号：</view>
			      <view>{{form.licensePlateNumber || ''}} </view>
			    </view>
			  </view>
			 <!-- <view class="card">
			    <view class="title"> 行驶路线 </view>
			    <view style="margin-bottom: 20rpx"></view>
			    <view>运输时间：{{form.dispatchTime}}</view>
			  </view> -->
			  <!-- <view class="card">
			    <view class="title"> 报警信息 </view>
			    <view>偏离路线</view>
			  </view> -->
			  <!-- <view class="card">
			    <view class="title"> 消错记录 </view>
			    <view
			      >内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</view
			    >
			    <view class="image">1111</view>
			    <view class="state">状态: 已处理</view>
			  </view> -->
			</template>
		    <template v-if="infoIndex == '2'">
		      <view class="card">
		        <view class="title"> 称重信息</view>
		        <view
		          v-for="(item, i) of form.oilList"
		          :key="i"
		          class="l-border-top"
		          :style="{
		            paddingBottom: i != form.oilList.length - 1 ? '30rpx' : '',
		          }"
		        >
		          <view class="form-item">
		            <view>油品名称：</view>
		            <view>{{item.oilName || ''}}</view>
		          </view>
		          <view class="form-item">
		            <view>油品种类：</view>
		            <view>{{item.categoryName || ''}}</view>
		          </view>
		          <view class="form-item">
		            <view>称重：</view>
		            <view>{{item.actualWeight || '0'}}kg</view>
		          </view>
				  <view class="form-item">
				    <view>桶数：</view>
				    <view>{{item.barrelsNumber || '0'}}桶 </view>
				  </view>
		        </view>
		      </view>
		    </template>
		    <template v-if="infoIndex == '3'">
		      <view class="card">
				  
		        <view class="title"> 附件信息 </view>
		        <!-- <view style="margin-bottom: 20rpx">
		          <u-album :urls="form.taskRecorderList.photo" keyName="src2"></u-album>
		        </view> -->
				<view style="margin-bottom: 20rpx" v-if="form.taskRecorderList.length">
				  <u-album :urls="form.taskRecorderList[0].photo.split(',')"></u-album>
				</view>
				<view class="form-item">
					<view>是否收油：</view>
					<view v-if="form.taskRecorderList.length && form.taskRecorderList[0].isRecycleOil == 0">未收油</view>
					<view v-if="form.taskRecorderList.length && form.taskRecorderList[0].isRecycleOil == 1">已收油</view>
				</view>
				<view class="form-item">
					<view>备注：</view>
					<view v-if="form.taskRecorderList.length">{{form.taskRecorderList[0].remark}}</view>
				</view>
				
		      </view>
		    </template>
		    <template v-if="infoIndex == '4'">
		      <view class="card">
				  <!-- taskCheckInList.signInPhoto -->
		        <view class="title"> 现场照片 </view>
		        <view style="margin-bottom: 20rpx" v-if="form.taskCheckInList.length">
		          <u-album :urls="form.taskCheckInList[0].signInPhoto.split(',')"></u-album>
		        </view>
				<view class="form-item">
					<view>签到位置：</view>
					<view v-if="form.taskCheckInList.length">{{form.taskCheckInList[0].position}}</view>
				</view>
				<view class="form-item">
					<view>备注：</view>
					<view v-if="form.taskCheckInList.length">{{form.taskCheckInList[0].remark}}</view>
				</view>
		      </view>
		    </template>
		  </view>
        <!-- <CollectionInfo :index="infoIndex"></CollectionInfo> -->
      </view>
    </view>
  </view>
</template>
<script>
import CollectionInfo from "../component/collectionInfo.vue";
import { transportationRecordsDetails} from "@/api/transport.js";
export default {
  components: {
    CollectionInfo,
  },
  data() {
    return {
      pageData: {
		  id:'',
	  },
      infoIndex: 0,
      list1: [
        {
          name: "接收方信息",
        },
		{
		  name: "运输信息",
		},
        {
          name: "称重信息",
        },
        {
          name: "单据信息",
        },
        {
          name: "签到信息",
        },
      ],
	  orderStatusOptions:[],
	  transportCarClass:[],
	  form:{},
	  oilNameList:'',
	  categoryNameList:'',
    };
  },
  computed: {
  	orderStatus() {
  		// let status = this.orderStatusOptions[this.form.orderStatus].dictLabel
  		let status
  		this.orderStatusOptions.forEach((item,index)=>{
  			if(item.dictValue == this.form.orderStatus){
  				status = item.dictLabel
  			}
  		})
  		return status
  	},
  },
  onLoad(option) {
	  this.$store.dispatch("actionGetUserInfo")
  	this.pageData.id = option.id
  	this.getData()
	this.getDetails()
  },
  methods: {
    async getData() {
	 this.orderStatusOptions = await this.getDictionaryData("order_status");
	 this.transportCarClass = await this.getDictionaryData("transport_car_class");
    },
    getDetails() {
		transportationRecordsDetails(this.pageData.id).then(res => {
			this.form = res.data
			this.oilNameList = res.data.oilList.map(item => item.oilName).join(',')
			this.categoryNameList = res.data.oilList.map(item => item.categoryName).join(',')
		})
	},
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  position: relative;
  background: linear-gradient(101deg, #47b352 1%, #47b352 29%, #1f9970 100%);
  background-size: 100% 444rpx;
  background-repeat: no-repeat;

  .order {
    padding: 46rpx 30rpx 0 30rpx;
  }
  .tabs-container {
    padding: 30rpx 0;
  }
  .title {
    font-size: 30rpx;
    color: #000000;
    padding: 30rpx 0 20rpx 0;
  }
  .value {
    view {
      margin-right: 20rpx;
      padding-bottom: 30rpx;
    }
  }

  .item-title {
    padding-bottom: 20rpx;
    view:nth-child(1) {
      font-size: 30rpx;
      color: #000000;
    }
    view:nth-child(2) {
      font-size: 28rpx;
    }
  }

  .form {
    .form-item {
      display: flex;
      font-size: 30rpx;
      padding-top: 16rpx;
	  view:nth-child(1) {
	    // color: #666;
	  		flex-shrink: 0;
	  }
      view:nth-child(2) {
        color: #000;
      }
    }
  }
  .order-card {
    padding: 30rpx;
    background: #fff;
    border-radius: 12rpx;
  }
  .card {
    padding: 30rpx;
    background: #fff;
    border-radius: 12rpx;
	margin-bottom: 30rpx;
	.form-item {
	  display: flex;
	  font-size: 30rpx;
	  padding-top: 16rpx;
	  view:nth-child(2) {
	    color: #000;
	  }
	}
  }
}
</style>
